<template>
  <div v-if="isShowPaymentDetail">
    <div class="flex justify-between">
      <span class="mb-2 rowName">{{ $t("订单状态") }}</span>
      <span class="rowValue">
        <el-tag :type="getOrderStatusName(detailInfo.order_status)?.type">{{
          getOrderStatusName(detailInfo.order_status)?.name
        }}</el-tag>
      </span>
    </div>
    <h2 style="font-size: 1.2rem" class="font-semibold">
      {{ detailInfo.sg }} {{ numberToCurrencyNo(detailInfo.amount) }}
      {{ detailInfo.currency }}
    </h2>
    <el-divider />
    <h4 class="mb-4">{{ $t("付款信息") }}</h4>
    <div v-loading="loading">
      <div
        v-for="(item, index) in payDetailList"
        :key="index"
        v-show="item.isShow"
        class="flex items-start justify-between mb-4"
      >
        <span class="rowName">{{ item.name }}</span>
        <span class="rowValue">{{ item.value }}</span>
      </div>
    </div>
    <h4 class="mb-4">{{ $t("收款信息") }}</h4>
    <div v-loading="loading">
      <div
        v-for="(item, index) in receiveDetailList"
        :key="index"
        class="flex items-start justify-between mb-2"
        v-show="item.isShow"
      >
        <span class="mb-2 rowName">{{ item.name }}</span>
        <span class="rowValue">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, computed, reactive, onMounted } from "vue";
import { VATransactionRecordDetail } from "@/api/VAAccount";
import { dayjs } from "element-plus";
import { numberToCurrencyNo } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const detailInfo = reactive({});
const loading = ref(false);
const props = defineProps({
  orderNo: {
    type: String,
    default: "",
  },
  isShowPaymentDetail: {
    type: Boolean,
    default: false,
  },
});

const payDetailList = computed(() => {
  let arr = [
    {
      name: `${t("交易类型")}`,
      value: pendingOrderStatus.value?.find(
        (i) => i.key === detailInfo.trade_type
      )?.name,
      isShow: true,
    },
    {
      name: `${t("付款账号")}`,
      value: detailInfo.send_card_number || "--",
      isShow: true,
    },
    {
      name: `${t("交易金额")}`,
      value: detailInfo.amount || "--",
      isShow: true,
    },
    {
      name: `${t("流水号")}`,
      value: detailInfo.order_no || "--",
      isShow: true,
    },
    {
      name: `${t("发起时间")}`,
      value:
        dayjs(detailInfo.create_time).format("YYYY-MM-DD HH:mm:ss") || "--",
      isShow: true,
    },
    {
      name: `${t("完成时间")}`,
      value:
        dayjs(detailInfo.finish_time).format("YYYY-MM-DD HH:mm:ss") || "--",
      isShow: true,
    },
  ];
  return arr;
});

const pendingOrderStatus = ref([
  { key: 0, name: `${t("充值")}`, type: "success" },
  { key: 1, name: `${t("收款")}`, type: "warning" },
  { key: 2, name: `${t("付款")}`, type: "danger" },
]);

const receiveDetailList = computed(() => {
  let arr = [
    {
      name: `${t("收款客户")}`,
      value: detailInfo.receive_name || "--",
      isShow: true,
    },
    {
      name: `${t("银行账号")}`,
      value: detailInfo.receive_card_number || "--",
      isShow: true,
    },
    {
      name: `${t("银行所在国家")}`,
      value: detailInfo.receive_bank_country || "--",
      isShow: true,
    },
    {
      name: `${t("银行名称")}`,
      value: detailInfo.receive_bank || "--",
      isShow: true,
    },
    {
      name: `${t("银行地址")}`,
      value: detailInfo.receive_bank_address || "--",
      isShow: true,
    },
    {
      name: `${t("持卡人姓名")}`,
      value: detailInfo.receive_card_name || "--",
      isShow: true,
    },
    {
      name: `${t("持卡人国家")}`,
      value: detailInfo.receive_card_country || "--",
      isShow: true,
    },
    {
      name: `${t("持卡人地址")}`,
      value: detailInfo.receive_card_address || "--",
      isShow: true,
    },
    {
      name: `${t("银行账号币种")}`,
      value: detailInfo.currency || "--",
      isShow: true,
    },
  ];
  return arr;
});

const getOrderDetail = async () => {
  try {
    loading.value = true;
    const res = await VATransactionRecordDetail({
      order_no: props.orderNo,
    });
    if (res) {
      for (const item in res) {
        detailInfo[item] = res[item];
      }
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};

const orderStatus = ref([
  { key: 0, name: "Processing", type: "warning" },
  { key: 1, name: "success", type: "success" },
  { key: 2, name: "fail", type: "danger" },
  { key: 3, name: "Cancel", type: "info" },
]);

const getOrderStatusName = (status) => {
  if (status > -1) {
    return orderStatus.value.find((i) => status === i.key);
  }
};

watch(
  () => props.orderNo,
  (newVal) => {
    if (newVal) {
      getOrderDetail();
    }
  }
);
</script>
<style lang="scss" scoped>
.rowName {
  display: flex;
  align-items: center;
  color: #777;
}

.rowValue {
  word-break: break-all;
}
</style>
